<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    .active{
      color: aqua;
    }
  </style>
</head>
<body>

<div id="app">


  <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
    <h2 v-bind:class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const  app = new Vue({
      el:'#app',
      data:{
        message: '卢本伟牛逼！',
        active: 'active',
        isActive: true,
        isLine: true
      },
      methods: {
          btnClick: function () {
              this.isActive =  !this.isActive
          },
          getClasses: function (){
              return {active:this.isActive,line:this.isLine}
          }
      }
    })
</script>

</body>
</html>